<template>
    <div>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="姓名">
                <el-input size="small" v-model="formInline.name" clearable placeholder="输入申请员工姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据列表 -->
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="name" label="姓名" width="50">
            </el-table-column>
            <el-table-column prop="workNumber" label="工号" width="150">
            </el-table-column>
            <el-table-column prop="phoneNumber" label="手机号" width="150">
            </el-table-column>
            <el-table-column prop="department" label="部门">
            </el-table-column>
            <el-table-column prop="position" label="职位">
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row>
            <el-col :span="24">
                <el-pagination background layout="prev, pager, next" :page-size="10" :total="total" :pager-count="11"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            total: 1,
            tableData: [],
            formInline: {
                name: ""
            },
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.$http.post("/manpower/getPageByCondition", {
                hr: this.formInline,
                currPage: val,
                pageSize: 6
            }).then(r => {
                console.log(r)
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data,
                    this.total = r.data.data.totalNums
                    this.loading = false
                }
            })

        },

        // 获取数据方法
        getdata(form) {
            this.loading = true
            // 获取员工列表
            this.$http.post("/manpower/getPageByCondition", {
                hr: form,
                currPage: 1,
                pageSize: 6
            }).then(r => {
                console.log(r)
                if (r.data.code == 200) {
                    this.tableData = r.data.data.data,
                        this.total = r.data.data.totalNums,
                        console.log(this.total)
                }
            })
        },
        //搜索事件
        search() {
            console.log(this.formInline)
            this.getdata(this.formInline)
        }

    },
    created: function () {
        this.$http.post("/manpower/getPageByCondition", {
            hr: this.formInline,
            currPage: 1,
            pageSize: 6
        }).then(r => {
            console.log(r)
            if (r.data.code == 200) {
                this.tableData = r.data.data.data,
                    this.total = r.data.data.totalNums,
                    console.log(this.total)
            }
        })
    }
}
</script>


<style scoped>
.user-search {
    margin-top: 20px;
}

.userRole {
    width: 100%;
}
</style>